<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<%@include file="../base/frameBase.jsp" %>
<body>
<form class="layui-form" action="" id="createForm">
    <div class="layui-form-item">
        <label class="layui-form-label">增加类目</label>
        <div class="layui-input-inline">
            <input type="text" name="category" lay-verify="required" placeholder="请输入"
                   class="layui-input">
        </div>
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit="" lay-filter="confim">创建</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <hr>
</form>
<hr>

<script type="text/html" id="barTool">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<table class="layui-hide" id="LAY_table_user" lay-filter="course"></table>
<script>
    layui.use('table', function () {
        var form = layui.form
            , layer = layui.layer
        var $ = layui.jquery;

        var table = layui.table;
        //监听提交
        form.on('submit(confim)', function (data) {
            $.ajax({
                url: '${ctx}/videoData/createCategory',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(data.field),
                success: function (res) {
                    layer.msg("类目提交成功")
                    table.reload('tableReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                },
                error: function (res) {
                    alert(res.data);
                }
            })
            return false;
        });
        //方法级渲染
        table.render({
            elem: '#LAY_table_user'
            , url: '${ctx}/videoData/getCategory'
            , cellMinWidth: 80
            , cols: [[
                {field: 'category', title: '类别名称'}
                , {fixed: 'right', title: '操作', width: 180, align: 'center', toolbar: '#barTool'}
            ]]
            , id: 'tableReload'
            , page: true
            , height: 500
        });
        //监听表格复选框选择
        table.on('checkbox(course)', function (obj) {
            console.log(obj)
        });

        //监听工具条
        table.on('tool(course)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.id + ' 的查看操作');
            } else if (obj.event === 'del') {
                layer.confirm('真的删除该类目吗，课程标题：' + data.category, function (index) {

                    // 发起请求删除课程
                    $.ajax({
                        url: '${ctx}/videoData/delCategoryId',
                        method: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify(data), // 以json字符串方式传递
                        success: function (data) {
                            if (data.code != '00000') {
                                layer.msg('[删除失败]' + data.msg);
                            } else {
                                layer.msg("删除成功！");
                                // 刷新下视频数据表格
                                table.reload('tableReload', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                                obj.del();
                            }
                        },
                        error: function (data) {
                            alert("信息发表失败，请检查网络连接。");
                        }
                    })
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                // 课程下视频编辑页面
                window.location.assign(encodeURI("${ctx}/video/edit?title=" + data.course_title + '&id=' + data.id));
            }
        });
        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload');
                //执行重载
                table.reload('tableReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        course_title: demoReload.val()
                    }
                });
                console.log("reload suc")
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
<%@include file="../base/frameFoot.jsp" %>